<template>
  <el-container>
    <el-aside width="200px">
      <div style="height: calc(100vh - 60px);background-color: #fff;">
        <el-row type="flex" alig="middle" justify="start" style="padding: 0px 20px;">
          <img src="../assets/logo.png" alt="校徽" class="school-logo">
          <div style="font-size: 18px;line-height: 60px;color: #6a7d50;">后台管理</div>
        </el-row>
        <el-menu :default-active="defaultActive" @open="handleOpen" @close="handleClose" @select="handleSelect"
                 router
                 background-color="#fff"
                 text-color="#333"
                 active-text-color="#545f46">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-s-tools"></i>
              <span>系统管理</span>
            </template>
            <el-menu-item :index="item.path" v-for="(item, index) in systemList" :key="index">
              <i :class="item.icon"></i>
              <span slot="title">{{ item.label }}</span>
            </el-menu-item>
          </el-submenu>

          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-warning"></i>
              <span>人员管理</span>
            </template>
            <el-menu-item :index="item.path" v-for="(item, index) in userList" :key="index">
              <i :class="item.icon"></i>
              <span slot="title">{{ item.label }}</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
    </el-aside>
    <el-container style="height: calc(100vh);background-color:#eee;">
      <el-header>
        <el-row type="flex" align="middle" justify="space-between"
                style="height: 60px;padding: 0 20px;border-bottom: 1px solid #ddd;">
          <div style="font-weight: bold;font-size: 18px;line-height: 60px;color: white;">灵犀智医系统</div>
          <el-dropdown>
            <el-row type="flex" align="middle" style="margin-top: 20px;cursor: pointer;">
              <div style="margin-right: 20px;font-size: 16px;color: white;">您好！{{ user.name }}</div>
              <el-avatar :src="user.avatar"/>
            </el-row>
            <el-icon class="el-icon--right">
              <arrow-down/>
            </el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>
                  <span @click="handleProfile">个人中心</span>
                </el-dropdown-item>
                <el-dropdown-item>
                  <span @click="handleOut">退出登录</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-row>
      </el-header>
      <el-main style="padding: 10px 10px 10px 10px;">
        <div style="height: calc(100vh - 80px);padding: 10px;background-color:#fff;">
          <!--          <transition name="slide-fade" mode="out-in">-->
          <!--            <router-view class="page-content"/>-->
          <!--          </transition>-->
          <transition name="fade-transform" mode="out-in">
            <router-view/>
          </transition>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import {setCache, getCache, clearCache} from '@/utils/useCache';

export default {
  name: 'ManageLayout',
  data() {
    return {
      defaultActive: "/manage/home",
      systemList: [
        {path: '/manage/home', label: '首页 ', icon: 'el-icon-platform-eleme'},
        {path: '/manage/system', label: '系统管理', icon: 'el-icon-menu'},
        {path: '/manage/iframe', label: '接口管理', icon: 'el-icon-s-help'},
        {path: '/manage/model', label: '中药常识管理', icon: 'el-icon-s-cooperation'},
        {path: '/manage/news', label: '中医文化管理', icon: 'el-icon-s-open'},
        {path: '/manage/thumbs', label: '点赞管理', icon: 'el-icon-s-promotion'},
        {path: '/manage/review', label: '评论管理', icon: 'el-icon-s-comment'},
        {path: '/manage/health', label: '健康管理', icon: 'el-icon-s-opportunity'},
        {path: '/manage/notice', label: '通知管理', icon: 'el-icon-message-solid'},
      ],
      userList: [
        {path: '/manage/admin', label: '管理员管理', icon: 'el-icon-s-custom'},
        {path: '/manage/user', label: '用户管理', icon: 'el-icon-user-solid'},
      ],
      user: getCache('USERINFO')
    }
  },
  mounted() {
    this.defaultActive = getCache("CURRENT_MENU") + "";
  },
  methods: {
    handleSelect(key, keyPath) {
      setCache("CURRENT_MENU", key);
      console.log(key, keyPath);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleProfile() {
      this.$router.push('/manage/info');
    },
    handleOut() {
      this.$confirm('即将退出系统, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$router.push("/");
        clearCache();
      }).catch(() => {
      });
    }
  }
}
</script>

<style scoped>
.el-header {
  background-color: #666;
  padding: 0;
}

.el-aside {
  height: 100vh;
  background-color: #fff;
}

.el-menu {
  height: calc(100vh - 130px - 200px);
  border-right: none;
}

.school-logo {
  height: 40px;
  width: 40px;
  margin-right: 15px;
  margin-top: 5px;
}

/* 基础样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#app {
  height: 100vh;
  background: #f5f7fa;
}

.app-container {
  display: flex;
  height: 100%;
}

/* 过渡动画效果 */
.slide-fade-enter-active {
  transition: all 0.1s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}

/* fade-transform */
.fade-transform--move,
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all .2s;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}


</style>